<template>
  <div class="app-container">
    <el-tabs type="card" @tab-click="tabClick" v-model="activeName">
      <el-tab-pane label="按年统计" name="1">
        <div class="infoTitle">
          图表统计信息
        </div>
        <div style="margin-top: 18px">
          <div :style="{height:eheight,width:echartsWidth}"
               ref="byYear"></div>
        </div>

        <div class="infoTitle">
          数据统计信息
        </div>
        <div style="margin-top: 18px">
          <el-table :data="tabList1" border>
            <el-table-column label="序号" type="index" width="55" align="center" />
            <el-table-column label="开店时间" align="center" prop="fsk"/>
            <el-table-column label="分店数量" align="center" prop="fsv" />
            <el-table-column label="环比增长" align="center" >
              <template slot-scope="scope">
                <span>{{(scope.row.fsv - scope.row.fslv)/scope.row.fslv * 100| numFilter }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="按省统计" name="2">
        <div class="infoTitle">
          图表统计信息
        </div>
        <div style="margin-top: 18px">
          <div :style="{height:eheight,width:echartsWidth}"
               ref="byProvince"></div>
        </div>
        <div class="infoTitle">
          数据统计信息
        </div>
        <div style="margin-top: 18px">
          <div style="margin-top: 18px">
            <el-table  :data="tabList2" border>
              <el-table-column label="序号" type="index" width="55" align="center" />
              <el-table-column label="省份" align="center" prop="name"/>
              <el-table-column label="分店数量" align="center" prop="value" />
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="总数统计" name="3">
        <div class="infoTitle">
          图表统计信息
        </div>
        <div style="margin-top: 18px">
          <div :style="{height:eheight,width:echartsWidth}"
               ref="byCount"></div>
        </div>
        <div class="infoTitle">
          数据统计信息
        </div>
        <div style="margin-top: 18px">
          <div style="margin-top: 18px">
            <el-table  :data="tabList2" border>
              <el-table-column label="序号" type="index" width="55" align="center" />
              <el-table-column label="年份" align="center" prop="fsk"/>
              <el-table-column label="开店数量" align="center" prop="fsv" />
              <el-table-column label="开店总数量" align="center" prop="sum" />
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { storeCountByYear, storeCountByProvince,storeCountBySum } from "@/api/manage/datacount";
import echarts from 'echarts'
export default {
  name: "Storeinfo",
  components: {
  },
  filters: {
    numFilter (value) {
      if(value == Infinity || value == -Infinity ||isNaN(value)){
        return 0
      }
      // 截取当前数据到小数点后两位
      return parseFloat(value).toFixed(2)
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      activeName:'1',
      echartsWidth: '100%',
      eheight: '400px',
      // 总条数
      total: 0,
      // 便利蜂分店信息表格数据
      tabList1: [],
      tabList2: [],
      tabList3: [],

    };
  },
  created() {
    this.getList1();
  },
  methods: {
    /** 查询便利蜂分店信息列表 */
    getList1() {
      storeCountByYear().then(response => {
        this.tabList1 = response.data;
        this.drawE1(this.tabList1,'便利蜂分店按年统计数量');
      });
    },
    getList2() {
      storeCountByProvince().then(response => {
        this.tabList2 = response.data;

        // this.tabList2 = [{value:3,name:9999},{value:9,name:888}]
        this.drawE2(this.tabList2,'便利蜂分店按省统计数量');
      });
    },
    getList3() {
      storeCountBySum().then(response => {
        this.tabList2 = response.data;
        // this.tabList2 = [{value:3,name:9999},{value:9,name:888}]
        this.drawE3(this.tabList2,'便利蜂分店总数按年统计');
      });
    },
    tabClick(tab){
      if(tab.name == '1'){
        this.getList1()
      } else if(tab.name == '2'){
        this.getList2()
      }else {
        this.getList3()
      }
    },
    drawE1(countData, title) {
      let keyName = []
      let keyNum = []
      countData.forEach(item =>{
        keyName.push(item.fsk);
        keyNum.push(item.fsv)
      })
      let myChart = echarts.init(this.$refs.byYear);
      // 绘制图表
      myChart.setOption({
        legend: {
          data: keyName,
          left: '10%'
        },
        color: ['#3398DB'],
        title: {title},
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: keyName,
          name: '开店时间'
        },
        yAxis: {},
        series: [{
          name: '开店数量',
          type: 'bar',
          data: keyNum
        }]
      })
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    drawE2(countData, title) {
      let titleData = []
      countData.forEach(item => {
        titleData.push(item.name)
      })
      let charts = echarts.init(this.$refs.byProvince);
      charts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: title+'<br/>{b} : {c} ({d}%)'
        },
        legend: {
          data: titleData
        },
        color: ['#ca8622', '#546570', '#d48265', '#bda29a', '#749f83', '#61a0a8', '#91c7ae', '#6e7074', '#c4ccd3', '#c23531', '#2f4554',],
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: countData
          }
        ],
        itemStyle: {
          // 阴影的大小
          shadowBlur: 0,
          // 阴影水平方向上的偏移
          shadowOffsetX: 0,
          // 阴影垂直方向上的偏移
          shadowOffsetY: 0,
          // 阴影颜色
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          emphasis: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
        }
      })
      window.addEventListener("resize", function () {
        charts.resize();
      });
    },
    drawE3(countData, title) {
      let keyName = []
      let keyNum = []
      countData.forEach(item =>{
        keyName.push(item.fsk);
        keyNum.push(item.sum)
      })
      let myChart = echarts.init(this.$refs.byCount);
      // 绘制图表
      myChart.setOption({
        legend: {
          data: keyName,
          left: '10%'
        },
        color: ['#3398DB'],
        title: {title},
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: keyName,
          name: '时间'
        },
        yAxis: {},
        series: [{
          name: '开店总数量',
          type: 'bar',
          data: keyNum
        }]
      })
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  }
};
</script>
<style scoped>
  .infoTitle {
    height: 36px;
    background-color: #f9f9f9;
    padding-left: 23px;
    line-height: 36px;
    color: #333;
    font-size: 14px;
    margin-bottom: 18px;
  }

</style>
